require('../css/sports-data.less');
document.ready(function () {
    //返回上一页
    const previousPage=document.querySelector('.previous_page');
    previousPage.addEventListener('click',function(){
        window.history.back();
    })
    var myChart = echarts.init(document.getElementById('main'));
    var myCharts = echarts.init(document.getElementById('mainss'));
    //id
    const userId = JSON.parse(window.localStorage.getItem('user')).user.userId;
    // console.log(userId);
    //运动数据请求
    $http.get(`/sport/data/${userId}`, function (res) {
        if (res.status === 0) {
            let arr = [];
            let arrs=[];
            // 数据
            // console.log(res.data.days);
            // 遍历数据
            res.data.days.forEach(function(items){
                // console.log(items.dayTimes);
                arrs.push(items.dayTimes)
            })
            // 遍历时间
            res.data.days.forEach(function (item) {
                // // 指定图表的配置项和数据
                arr.push(item.date.substr(5));
            })
            let option = {
                title: {
                    text: '近七天运动时长',
                    left: 'left' // 水平居左
                },
                xAxis: {
                    type: 'category',
                    data: arr
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: arrs,
                    type: 'bar'
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    });
    
    //饼图
    let obj = {
        '骑行': 0,
        "跑步": 0,
        "训练": 0
    }
    $http.get(`/sport/data/${userId}`, function(res) {
        if (res.status === 0) {
            res.data.days.forEach(function(day) {
                day.exerciseData.forEach(function(item) {
                    // 巧用对象的键值对数据结构
                    obj[item.type] += Number(item.time)
                })
            })
        }
        
        // 拼成 Echarts 需要的配置项
        let seriesPieData = []
        for (let key in obj) {
            seriesPieData.push({ value: obj[key], name: key })
        }
        // 渲染饼图
        renderPieChart(seriesPieData);
    })
    // 渲染饼图
    function renderPieChart(pieSeriesData) {
        const pieChart = echarts.init(document.getElementById('mains'));
        const pieOption = {
            title: {
                text: '运动分类',
                left: 'left' // 水平居左
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: 'middle', // 垂直居中
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: pieSeriesData,
                    label: {
                        // show: false,
                        position: 'inside',
                        formatter: '{d}%' // 字符串模板
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    
        pieChart.setOption(pieOption);
    }

    // 折线图
    $http.get(`/sport/data/${userId}`, function (res) {
        if (res.status === 0) {
            let arr = [];
            let arrs=[];
            // 数据
            // console.log(res.data.days);
            // 遍历数据
            res.data.days.forEach(function(items){
                // console.log(items.dayTimes);
                arrs.push(items.dayTimes)
            })
            // 遍历时间
            res.data.days.forEach(function (item) {
                // // 指定图表的配置项和数据
                arr.push(item.date.substr(5));
            })
            let option = {
                title: {
                    text: '近七天训练次数',
                    left: 'left' // 水平居左
                },
                xAxis: {
                    type: 'category',
                    data: arr
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: arrs,
                    type: 'line'
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myCharts.setOption(option);
        }
    });
})